<template>
  <div class="app-main">
    <a-card :bordered="false" style="margin-bottom: 10px">
      <!-- 查询区域 -->
      <a-row class="row-form">
        <a-form-model v-bind="formItemLayout" @keyup.enter.native="onQuery">
          <a-col :span="8">
            <a-form-model-item label="公民身份号码" :labelCol="{ span: 7 }" :wrapperCol="{ span: 17 }">
              <a-input v-model="form.identityCard" placeholder="请输入" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="姓名">
              <a-input v-model="form.name" placeholder="请输入" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="联系方式">
              <a-input v-model="form.number" placeholder="请输入" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="矫正类别">
              <j-dict-select-tag v-model="form.correctionCategory" placeholder="请选择" dictCode="correction_category" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="矫正开始日期">
              <a-date-picker v-model="form.correctionStartDate" valueFormat="YYYY-MM-DD" style="width:100%;" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="矫正结束日期">
              <a-date-picker v-model="form.correctionEndDate" valueFormat="YYYY-MM-DD" style="width:100%;" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item :wrapper-col="{ offset: 0 }">
              <a-space style="padding-left: 8px;">
                <a-button type="primary" @click="onQuery"> 查询 </a-button>
                <a-button @click="onResetForm"> 重置 </a-button>
              </a-space>
            </a-form-model-item>
          </a-col>
        </a-form-model>
      </a-row>
    </a-card>
    <a-card :bordered="false">
      <!-- 操作按钮区域 -->
      <a-space style="margin-bottom: 18px;">
        <a-button @click="handleExportXls()" :loading="confirmLoading"><a-icon type="upload" />导出</a-button>
        <a-button @click="handleImportXls"><a-icon type="import" />导入</a-button>
        <a @click="dowloadsXls">下载导入模板</a>
      </a-space>
      <!-- 表格展示 -->
      <div class="table-page-content">
        <z-table ref="table" rowKey="specialId" :showAlert="false" :showSelection="true" :loading="loading"
          :columns="columns" :dataSource="pageData" @change="onTableChange" />
      </div>
    </a-card>
    <j-import-modal ref="importModal" :url="importUrl" @ok="handleOk" />
    <dispose-modal ref="disposeModal" @ok="handleOk" />
    <alarm-modal ref="alarmModal" />
  </div>
</template>

<script>
import * as specialApi from '@/api/xlgc/special.js'
import { downLoadFileReader } from '@/utils/export-util/util'
import disposeModal from './modules/disposeModal'
import alarmModal from './modules/alarmModal'
import { downLoadMix } from '@/utils/export-util/util'
export default {
  components: { disposeModal, alarmModal },
  data() {
    return {
      formItemLayout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 18 }
      },
      loading: false,
      confirmLoading: false,
      form: {},
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 60,
          align: 'center',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` // 序号分页后连续
        },
        {
          title: '公民身份号码',
          width: 100,
          align: 'center',
          dataIndex: 'identityCard',
          customRender: text => {
            return text || '--'
          }
        },
        {
          title: '姓名',
          dataIndex: 'name',
          width: 115,
          align: 'center',
          customRender: text => {
            return text || '--'
          }
        },
        {
          title: '联系方式',
          dataIndex: 'number',
          width: 100,
          align: 'center',
          customRender: text => {
            return text || '--'
          }
        },
        {
          title: '籍贯',
          dataIndex: 'nativePlace',
          width: 110,
          align: 'center',
          customRender: text => {
            return <j-ellipsis value={text} length={20} />
          }
        },
        {
          title: '矫正类别',
          dataIndex: 'correctionCategory',
          width: 100,
          align: 'center',
          customRender: text => {
            if (this.$filterDictTextByCache('correction_category', text)) {
              return <j-ellipsis value={this.$filterDictTextByCache('correction_category', text)} length={6} />
            } else {
              return '--'
            }
          }
        },
        {
          title: '矫正开始日期',
          dataIndex: 'correctionStartDate',
          width: 100,
          align: 'center',
          customRender: text => {
            return text || '--'
          }
        },
        {
          title: '矫正结束日期',
          dataIndex: 'correctionEndDate',
          width: 100,
          align: 'center',
          customRender: text => {
            return text || '--'
          }
        },
        {
          title: '操作',
          width: 140,
          dataIndex: 'action',
          align: 'center',
          customRender: (text, record, index) => {
            return (
              <a-space class="action-button">
                <a-button type="link" onClick={(event) => this.handleRouter('view', record)}>查看</a-button>
                <a-button type="link" onClick={(event) => this.handleDispose('addDispose', record)}>处置</a-button>
                <a-button type="link" onClick={(event) => this.handleAlarm(record)}>一键报警</a-button>
              </a-space>
            )
          }
        }
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10
      },
      pageData: {}
    }
  },
  computed: {
    importUrl() {
      return specialApi.correctionImportUrl
    }
  },
  created() { },
  async mounted() {
    this.onQuery()
  },
  methods: {
    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onResetForm() {
      this.form = {}
      this.pageFilter.pageNo = 1
      this.pageFilter.pageSize = 10
      this.refreshTable()
    },
    onTableChange(pagination, pageFilter, sorter) {
      this.pageFilter = Object.assign({}, this.pageFilter, pagination)
      this.refreshTable()
    },
    refreshTable() {
      let form = Object.assign({}, this.form, this.pageFilter)
      this.loading = true
      specialApi.getListCorrection(form).then(res => {
        this.loading = false
        if (res.success) {
          this.pageData = res.result ? res.result : {}
        } else {
          this.$message.warn(res.message)
        }
      })
        .catch(e => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    handleExportXls() {
      this.confirmLoading = true
      let selectList = this.$refs.table.getSelectedRows()
      let obj = {
        ids: selectList.map(v => v.specialId),
        ...this.form
      }
      specialApi.exportCorrection(obj).then(async res => {
        const fileName = '社区矫正人员.xls'
        await downLoadFileReader(res, fileName)
        this.confirmLoading = false
        this.$refs.table.onClearRowKeys()
      })
    },
    dowloadsXls() {
      specialApi.getTempletExcel({ type: 14 }).then(res => {
        if (res && res.size > 0) {
          const fileName = '社区矫正人员模板.xls'
          downLoadMix(res, fileName)
        } else {
          this.$message.warn('模板不存在！')
        }
      })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
    },
    handleImportXls() {
      this.$refs.importModal.show()
    },
    handleOk() {
      this.onQuery()
    },
    handleRouter(type, record) {
      let path = '/person/details'; let query = { type: 2, id: record.specialId }
      this.$router.push({ path: path, query })
    },
    handleDispose(status, record) {
      this.$refs.disposeModal.show(status, record)
    },
    handleAlarm(record) {
      this.$refs.alarmModal.show()
    }
  }
}
</script>
<style lang="less" scoped>
.row-form {
  .ant-col {
    position: relative;

    &::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: 85%;
      height: 1px;
      border-bottom: 1px #d6d6d6 dashed;
    }

    &:last-child {
      &::after {
        border: 0;
      }
    }
  }

  .ant-form-item {
    margin-bottom: 18px;

    &.c-label {
      /deep/.ant-form-item-label {
        width: 81px;
      }
    }
  }
}

.action-button {
  .ant-btn {
    padding-left: 8px;
    padding-right: 0;
  }
}
</style>
